<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.css">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css">

    <style type="text/css">
        .clubSystem {
            width: 1100px;
            margin: auto;
        }
        .clubSystemHead > div:first-child {
            float: left;
            font-size: 20px;
            font-weight: bold;
            line-height: 50px;
        }
        .clubSystemHead > div:last-child {
            float: right;
        }
        .clubSystemBody {
            padding: 20px;
        }
        .center {
            transform: translateY(-50%);
            position: relative;
            top: 50%;
        }
        /*去浮动*/
        .clear:after {
            content: "";
            display: block;
            clear: both;
        }
        .pagination li {
            list-style-type: none;
            display: inline-block;
            margin-right: 5px;
        }
        .pagination button {
            border: none;
            background-color: #f8f9fa;
            color: #007bff;
            padding: 5px 10px;
            cursor: pointer;
        }
        .pagination button:hover {
            background-color: #e9ecef;
        }
        .pagination .active button {
            background-color: #007bff;
            color: white;
        }
        .pagination .disabled button {
            background-color: #e9ecef;
            color: #6c757d;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div class="clubSystem" id="clubIndex">
    <div>
        <div class="clubSystemHead clear" style="height: 50px;">
            <div>社团中心</div>
            <div class="input-group mb-3 center" style="width: 250px;height: 30px">
                <span class="form-floating">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
                    </svg>
                </span>
                <input type="text" class="form-control" id="clubInput" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" placeholder="输入关键字搜索" style="width: 220px;height: 30px">
            </div>
        </div>
    </div>
    <hr>
    <div class="clubSystemBody clear">
        <div class="clubType clear">
            <input type="radio" class="btn-check" name="clubType" id="option1" autocomplete="off" checked value="0">
            <label class="btn btn-outline-danger" for="option1">首页</label>

            <input type="radio" class="btn-check" name="clubType" id="option2" autocomplete="off" value="1">
            <label class="btn btn-outline-danger" for="option2">文化艺术</label>

            <input type="radio" class="btn-check" name="clubType" id="option3" autocomplete="off" value="2">
            <label class="btn btn-outline-danger" for="option3">公艺志愿</label>

            <input type="radio" class="btn-check" name="clubType" id="option4" autocomplete="off" value="3">
            <label class="btn btn-outline-danger" for="option4">地域文化</label>

            <input type="radio" class="btn-check" name="clubType" id="option5" autocomplete="off" value="4">
            <label class="btn btn-outline-danger" for="option5">学术科创</label>

            <input type="radio" class="btn-check" name="clubType" id="option6" autocomplete="off" value="5">
            <label class="btn btn-outline-danger" for="option6">体育健身</label>

            <input type="radio" class="btn-check" name="clubType" id="option7" autocomplete="off" value="6">
            <label class="btn btn-outline-danger" for="option7">实践促进</label>

            <div style="float: right">
                <input type="radio" class="btn-check" name="clubStatue" id="option8" autocomplete="off" value="2" checked>
                <label class="btn btn-outline-primary" for="option8">全部</label>

                <input type="radio" class="btn-check" name="clubStatue" id="option9" autocomplete="off" value="1">
                <label class="btn btn-outline-primary" for="option9">招新中</label>

                <input type="radio" class="btn-check" name="clubStatue" id="option10" autocomplete="off" value="0">
                <label class="btn btn-outline-primary" for="option10">未招新</label>
            </div>


        </div>
        <div class="card" style="width: 15rem;float: left;margin: 10px" v-for="i in paginatedClubData" :key="i.clubId">
            <img :src="'img/'+i.clubHead" class="card-img-top" style="height: 210px">
            <div class="card-body">
                <h5 class="card-title">{{i.clubName}}</h5>
                <a :href="'clubData.html?clubId='+i.clubId" class="btn btn-primary" style="background-color: #B60004" v-if="i.newMember == 1">加入</a>
                <a :href="'clubData.html?clubId='+i.clubId" class="btn btn-primary" style="background-color: gray" v-if="i.newMember == 0">查看</a>
            </div>
        </div>
    </div>

    <ul class="pagination">
        <li :class="{ disabled: currentPage === 1 }">
            <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
        </li>
        <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
            <button @click="changePage(page)">{{ page }}</button>
        </li>
        <li :class="{ disabled: currentPage === totalPages }">
            <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
        </li>
    </ul>
</div>

<script>
    $(function(){
        // LoginVerify();
        let app = new Vue({
            el: "#clubIndex",
            data: {
                currentPage: 1,
                itemsPerPage: 8,
                clubData: [], // 初始化为数组
                totalItems: 0, // 添加 totalItems 数据属性
                maxPage: 0,
                type:0,
                statue:2
            },
            computed: {
                totalPages() {
                    return Math.ceil(this.totalItems / this.itemsPerPage);
                },
                paginatedClubData() {
                    const start = (this.currentPage - 1) * this.itemsPerPage;
                    const end = start + this.itemsPerPage;
                    return this.clubData.slice(start, end);
                }
            },
            methods: {
                changePage(page) {
                    if (page < 1 || page > this.totalPages) {
                        return;
                    }
                    this.currentPage = page;
                    loadClub();
                },
                updatePagination(data) {
                    console.log("Received data:", data);
                    this.clubData = data;
                    this.totalItems = data.length;
                    this.maxPage = Math.ceil(this.totalItems / this.itemsPerPage);
                }
            }
        });

        function loadClub() {
            let type = app.type;
            let name = "DataNull";
            if ($("#clubInput").val() !== "") {
                name = $("#clubInput").val();
            }
            let statue = app.statue;
            $.ajax({
                url: "club/" + name + "/" + type + "/" + statue,
                type: "get",
                dataType: "json",
                success: function(req) {
                    app.updatePagination(req);
                },
                error: function(xhr, status, error) {
                    console.error("Error loading clubs:", xhr.responseText);
                }
            });
        }

        // 初始加载俱乐部数据
        loadClub();

        // 监听输入框的回车事件
        $("#clubInput").keydown(function(event) {
            if (event.keyCode === 13) {
                app.currentPage = 1; // 重置为第一页
                loadClub();
            }
        });

        $('input[name="clubType"]').on('change', function(event) {
            app.type = event.target.value;
            app.currentPage = 1; // 重置为第一页
            loadClub();
        });

        $('input[name="clubStatue"]').on('change', function(event) {
            app.statue = event.target.value;
            app.currentPage = 1; // 重置为第一页
            loadClub();
        });
    });
</script>
</body>
</html>